import './style.scss'
import { Button, ConfigProvider, Dropdown, Upload} from 'antd';
import ImageLogo from '@/assets/images/logo.png'
import { useAppDispatch, useAppSelector } from '@/store';
import { commandClassMap } from '@/reducers/menuSlice';
import { CommandKey } from '@/core/public';



export default () => {
  const dispatch = useAppDispatch()
  const menusState = useAppSelector((state) => state.menus)
    
  const onCommandClick = (key: CommandKey) => {
    commandClassMap[key].triggerCommand(dispatch)
  }

  return <>
    <div className="menu-wrapper">
      <img className='menu-logo' src={ImageLogo} draggable="false" />
      <div className="menu-list">
        { 
          menusState.list.map((dropdown) => {
            const items = dropdown.items.map(childMenu => {
              if(childMenu.type == 'item'){
                let newChildMenu = { ...childMenu };
                const CommandClass = commandClassMap[childMenu.key];

                if(CommandClass.MenuItem) {
                  newChildMenu.label = <CommandClass.MenuItem {...childMenu} key={childMenu.key}></CommandClass.MenuItem>
                }
                else {
                  newChildMenu.label = <div className='menu-item-inner'>
                    <span className='menu-item-inner__label'>{ newChildMenu.name }</span>
                    <span className='menu-item-inner__shortcut'>{ newChildMenu.shortcut }</span>
                  </div>
                }

                return newChildMenu
              }
              else return childMenu
            })
            
            return <Dropdown 
              key={dropdown.key}
              trigger={['click']}
              overlayClassName='menu-dropdown-root'
              menu={{
                items: items,
                onClick: (menuInfo) => onCommandClick(menuInfo.key as CommandKey)
              }} 
              overlayStyle={{
                minWidth: 190
              }}
            >
              <Button type="text" className='menu-dropdown'>{ dropdown.label }</Button>
            </Dropdown>
          })
        }
      </div>
    </div>

    <ConfigProvider componentSize='middle'>
      {
        Object.entries(commandClassMap).map(([key, CommandClass]) => {
          if(CommandClass.Component) return <CommandClass.Component key={key}></CommandClass.Component>
          else return ''
        })
      }
    </ConfigProvider>
  </>
}